<template>
  <div id="app">
    <a-layout id="components-layout-demo-side" style="min-height: 100vh;">
      <a-layout-sider v-model="collapsed" style="background:white;" width="20em">
        <div style="box-shadow: 0.25em 0.25em 0.25em rgba(169,194,233,.24);padding: 1.5em;">
          <span class="index_system_name">湖南科技大学</span> <span>出卷系统</span>
        </div>
        <div class="index_admin_box">
          <img class="index_admin_logo" :src="adminLogo" />
          <span class="index_admin_text">院级管理员<br>{{accessState.adminName}}</span>
        </div>
        <a-menu class="index_side_bar" theme="light" :default-selected-keys="['1']" mode="inline" >
          <a-sub-menu key="sub1">
            <span slot="title"><img class="index_side_icon" :src="icon1"><span class="index_side_text">用户管理</span></span>
            <a-menu-item key="1" @click="toStulist">
              学生列表
            </a-menu-item>
            <a-menu-item key="2">
              老师列表
            </a-menu-item>
            <a-menu-item key="3">
              批量导入
            </a-menu-item>
            <a-menu-item key="4">
              发布通知
            </a-menu-item>
            <a-menu-item key="5">
              审核注册
            </a-menu-item>
          </a-sub-menu>
          <a-sub-menu key="sub2">
            <span slot="title"><img class="index_side_icon" :src="icon2"><span class="index_side_text">课程管理</span></span>
            <a-menu-item key="6">
              课程列表
            </a-menu-item>
            <a-menu-item key="7">
              批量导入
            </a-menu-item>
          </a-sub-menu>
          <a-sub-menu key="sub3">
            <span slot="title"><img class="index_side_icon" :src="icon3"><span class="index_side_text">课程组管理</span></span>
            <a-menu-item key="8">
              课程组列表
            </a-menu-item>
            <a-menu-item key="9">
              批量导入
            </a-menu-item>
            <a-menu-item key="10">
              审核加入
            </a-menu-item>
          </a-sub-menu>
          <a-menu-item key="11">
            <img class="index_side_icon" :src="icon4">
            <span class="index_side_text index_side_text_cur">班级管理</span>
          </a-menu-item>
          <a-menu-item key="12">
            <img class="index_side_icon" :src="icon5">
            <span class="index_side_text index_side_text_cur">专业管理</span>
          </a-menu-item>
        </a-menu>
      </a-layout-sider>

      <a-layout>
        <a-layout-header style="background: #fff; padding: 0 6em; text-align: right;">
          <span style="font-size: large; margin: 0 1em;"><a-icon type="sync" style="color:#FFDEAD; font-size: large;" />刷新</span>
          <span style="font-size: large;"><a-icon type="poweroff" style="color:#87CEFA; font-size: large;" />退出</span>
        </a-layout-header>
        <a-layout-content style="margin: 0 16px;">
          <a-breadcrumb style="padding: 1em;text-align: left">
            <a-breadcrumb-item>User</a-breadcrumb-item>
            <a-breadcrumb-item>Bill</a-breadcrumb-item>
          </a-breadcrumb>
          <div :style="{ padding: '1em', background: 'white', minHeight: '50em', width: '110em' }">
            <router-view></router-view>
          </div>
        </a-layout-content>
        <a-layout-footer style="text-align: center">
          Ant Design ©2018 Created by Ant UED
        </a-layout-footer>
      </a-layout>
    </a-layout>
  </div>
</template>

<script>
import adminLogo from '@/assets/image/icon1.png'
import Icon1 from '@/assets/image/icon2.png'
import Icon2 from '@/assets/image/icon3.png'
import Icon3 from '@/assets/image/icon4.png'
import Icon4 from '@/assets/image/icon5.png'
import Icon5 from '@/assets/image/icon6.png'

export default {
  name: 'Index',
  data() {
    return {
      collapsed: false,
      adminLogo:adminLogo,
      icon1:Icon1,
      icon2:Icon2,
      icon3:Icon3,
      icon4:Icon4,
      icon5:Icon5
    }
  },
  methods: {
    toStulist() {
      this.$router.push('/stulist')
    }
  }
}
</script>

<style scoped>
.index_system_name{
  font-weight: bolder;
  font-size: 1.2em;
  margin-right: 1em;
}
.index_admin_box{
  display: flex;
  justify-content: center;
  border-bottom: #ECECEC 1px solid;
  margin: 1em 0;padding: 1.5em 0;
}
.index_admin_logo{
  width: 3em;
  height: 3em;
}
.index_admin_text{
  font-weight: bolder;
  margin-left: 1em;
  display: flex;
  justify-content: center;
  line-height: 2em;
}
.index_side_icon{
  max-width: 2em;
  max-height: 2em;
  margin-right: 2em;
}
.index_side_bar{
  width: 20em;
  display: flex;
  flex-wrap: wrap;
  justify-content:center;
}
.index_side_text{
  width: 5em;
  /*让span的宽度生效*/
  display: inline-block;
}
.index_side_text_cur{
  margin-right: 1em;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  /*margin-top: 60px;*/
}
#components-layout-demo-side .logo {
  height: 32px;
  background: rgba(255, 255, 255, 0.2);
  margin: 16px;
}
</style>
